<template>
  <div class="main">
    <h1 class="main-title">门店列表</h1>
    <div class="main-contain">
      <div class="content-wrapper">
        <el-row :gutter="10">
          <el-col :span="4"><el-input placeholder="店铺编号" v-model="query.storeNo" clearable class="filter-item"  @keyup.enter.native="searchProduct()"></el-input></el-col>
          <el-col :span="4"><el-input placeholder="店铺名称" v-model="query.storeName" clearable class="filter-item"  @keyup.enter.native="searchProduct()"></el-input></el-col>
          <el-col :span="4"><el-input placeholder="店铺联系人" v-model="query.contact" clearable class="filter-item"  @keyup.enter.native="searchProduct()"></el-input></el-col>
          <el-col :span="4"><el-input placeholder="店铺登录账号" v-model="query.mobile" clearable class="filter-item"  @keyup.enter.native="searchProduct()"></el-input></el-col>
          <el-col :span="3">
            <el-select  class="filter-item" placeholder="店铺状态" v-model="query.status" clearable @keyup.enter.native="searchProduct()">
              <el-option v-for="(item,index) in status"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-button type="primary" @click="searchProduct()">搜索</el-button>
        </el-row>
        <div class="table-wrapper">
          <el-table :data="cusStoreList" stripe border v-loading="$store.state.loading">
            <el-table-column width="50" label="序号" align="center" fixed="left">
              <template slot-scope="scope">
                {{(page-1)*pageSize + scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="storeNo" label="店铺编号" align="center" ></el-table-column>
            <el-table-column prop="storeName" label="店铺名称" align="center"></el-table-column>
            <el-table-column prop="contact" label="联系人" align="center"></el-table-column>
            <el-table-column prop="mobile" label="登陆账号" align="center"></el-table-column>
            <el-table-column label="状态" align="center"  width="80">
              <template slot-scope="scope">
                <span v-if='scope.row.status===1'>启用</span>
                <span v-if='scope.row.status===2'>禁用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="showProduct(scope)" v-show='scope.row.status===2'>启用</el-button>
                <el-button type="text" size="mini" @click="hideProduct(scope)" v-show='scope.row.status===1'>禁用</el-button>
                <el-button type="text" size="mini" @click.native.prevent="resetPwd(scope)">重置密码</el-button>
              </template>
            </el-table-column>
          </el-table>
          <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" :views="5" @page-change="pageChange" @size-change="sizeChange"></v-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      cusStoreList: [],
      // 搜索
      query: {
        storeNo: '',
        storeName: '',
        contact: '',
        mobile: '',
        status: ''
      },
      // 分页
      page: 1,
      pageSize: 10,
      total: 0,
      // 商品状态
      status: [{
        value: '',
        label: '状态'
      }, {
        value: '1',
        label: '启用'
      }, {
        value: '2',
        label: '禁用'
      }]
    }
  },
  mounted () {
    this.cusStore()
  },
  methods: {
    // 列表
    cusStore () {
      this.$store.commit('setLoading', true)
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        storeNo: this.query.storeNo,
        storeName: this.query.storeName,
        contact: this.query.contact,
        mobile: this.query.mobile,
        status: this.query.status
      }
      this.$http.post(this.$api + '/customerStore/selective', params).then(res => {
        if (res.responseCode === '0000') {
          this.cusStoreList = res.data.list
          this.total = res.data.total
          this.$store.commit('setLoading', false)
        } else {
          this.$message.error({
            message: res.responseMsg,
            duration: this.$store.state.duration
          })
          this.$store.commit('setLoading', false)
        }
      }).catch(() => {
        this.$message.error({
          duration: this.$store.state.duration,
          message: '请求超时！'
        })
        this.$store.commit('setLoading', false)
      })
    },
    // 搜索
    searchProduct () {
      this.cusStore()
    },
    // // 显示隐藏
    showProduct (scope, status) {
      this.$confirm('确认要启用该店铺?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          'storeId': scope.row.storeId,
          'status': 1
        }
        this.$http.post(this.$api + '/customerStore/changeStatus', params).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              message: res.responseMsg,
              type: 'success'
            })
            this.cusStore()
          } else {
            this.$message({
              message: res.responseMsg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          duration: this.$store.state.duration,
          type: 'info',
          message: '已取消'
        })
      })
    },
    hideProduct (scope, status) {
      this.$confirm('确认要禁用该店铺?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          'storeId': scope.row.storeId,
          'status': 2
        }
        this.$http.post(this.$api + '/customerStore/changeStatus', params).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              message: res.responseMsg,
              type: 'success'
            })
            this.cusStore()
          } else {
            this.$message({
              duration: this.$store.state.duration,
              message: res.responseMsg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          duration: this.$store.state.duration,
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 重置密码
    resetPwd (scope) {
      this.$confirm('确认要重置店铺登陆密码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          'storeId': scope.row.storeId
        }
        this.$http.post(this.$api + '/user/restPasw', params).then(res => {
          if (res.responseCode === '0000') {
            // 判断是否是当前登录用户
            if (Cookie.get('storeId') === scope.row.storeId + '') {
              this.$message({
                type: 'success',
                message: '修改密码成功，请重新登录！',
                duration: this.$store.state.duration,
                onClose: () => {
                  this.$router.push('/login')
                }
              })
            } else {
              this.$message({
                duration: this.$store.state.duration,
                type: 'success',
                message: res.responseMsg
              })
            }
          } else {
            this.$message({
              duration: this.$store.state.duration,
              message: res.responseMsg,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          duration: this.$store.state.duration,
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 分页
    sizeChange (size) {
      this.pageSize = size
      this.cusStore()
    },
    pageChange (val) {
      this.page = val
      this.cusStore()
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-tooltip{
    margin-top: 6px
  }
  .el-row {
    margin: 10px 0;
  }
  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
    width: 100%;
  }
  .el-pagination{
    margin-bottom: 20px;
  }
</style>
